Виджет ActiveForm — Yii2

disel

Рассмотрим часто использующийся при разработке виджет ActiveForm. Виджет позволяет добавить на сайт форму с полями ввода, кнопками, списками выбора, чекбоксами, радио кнопками. Для создания формы подключаем в шаблоне следующие классы:

1
2
3
4
5
6
7
8
9
// подключаем помощник html разметки
use yii\helpers\Html;
// подключаем виджет для работы с формами
use yii\widgets\ActiveForm;
// для добавления captcha
use yii\captcha\Captcha;
// вместо yii\widgets\ActiveForm можно использовать версию под
// bootstrap 3, которая предоставляет дополнительные возможности
use yii\bootstrap\ActiveForm;

Инициализация формы

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$form = ActiveForm::begin([
    // идентификатор формы
    'id' => 'feedback-form',
    'options' => [
        // класс формы
        'class' => 'form-horizontal',
        // возможность загрузки файлов
        'enctype' => 'multipart/form-data'
     ]
]);
/* Сюда добавляем поля формы */
ActiveForm::end();
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
</form>

Текстовое поле

Простое текстовое поле

1
2
3
4
5
6
7
8
9
echo $form->field($model,'name');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-name">
        <label class="control-label" for="feedbackform-name">Name</label>
        <input type="text" id="feedbackform-name" class="form-control" name="FeedbackForm[name]">
        <div class="help-block"></div>
    </div>
</form>

Текстовое поле с подсказкой и описанием

1
2
3
4
5
6
7
8
9
10
echo $form->field($model, 'name')->textInput()->hint('Введите имя')->label('Имя');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-name">
        <label class="control-label" for="feedbackform-name">Имя</label>
        <input type="text" id="feedbackform-name" class="form-control" name="FeedbackForm[name]">
        <div class="hint-block">Введите имя</div>
        <div class="help-block"></div>
    </div>
</form>

Текстовое поле для e-mail

Простое поле для e-mail

1
2
3
4
5
6
7
8
9
echo $form->field($model, 'email')->input('email');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-email">
        <label class="control-label" for="feedbackform-email">Email</label>
        <input type="email" id="feedbackform-email" class="form-control" name="FeedbackForm[email]">
        <div class="help-block"></div>
    </div>
</form>

Поле с подсказкой и описанием

1
2
3
4
5
6
7
8
9
10
echo $form->field($model, 'email')->input('email')->hint('Введите адрес почты')->label('Электронный адрес');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-email">
        <label class="control-label" for="feedbackform-email">Электронный адрес</label>
        <input type="email" id="feedbackform-email" class="form-control" name="FeedbackForm[email]">
        <div class="hint-block">Введите адрес почты</div>
        <div class="help-block"></div>
    </div>
</form>

Поле для ввода пароля

Простое поле для пароля

1
2
3
4
5
6
7
8
9
10
11
12
// первый вариант
echo $form->field($model, 'password')->passwordInput();
// второй вариант
echo $form->field($model, 'password')->input('password');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-password">
    <label class="control-label" for="feedbackform-password">Password</label>
    <input type="password" id="feedbackform-password" class="form-control" name="FeedbackForm[password]">
    <div class="help-block"></div>
    </div>
</form>

Поле с подсказкой и описанием

1
2
3
4
5
6
7
8
9
10
11
12
13
echo $form->field($model, 'password')
          ->passwordInput()
          ->hint('Пароль должен содержать латинские символы и буквы')
          ->label('Введите пароль');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-password">
        <label class="control-label" for="feedbackform-password">Введите пароль</label>
        <input type="password" id="feedbackform-password" class="form-control" name="FeedbackForm[password]">
        <div class="hint-block">Пароль должен содержать латинские символы и буквы</div>
        <div class="help-block"></div>
    </div>
</form>

Многострочное текстовое поле

Простое многострочное поле

1
2
3
4
5
6
7
8
9
echo $form->field($model, 'body')->textarea();
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-body">
        <label class="control-label" for="feedbackform-body">Body</label>
        <textarea id="feedbackform-body" class="form-control" name="FeedbackForm[body]"></textarea>
        <div class="help-block"></div>
    </div>
</form>

Многострочное поле определенного размера с описанием

1
2
3
4
5
6
7
8
9
echo $form->field($model, 'body')->textarea(['rows'=>4,'cols'=>10])->label('Сообщение');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-body">
        <label class="control-label" for="feedbackform-body">Сообщение</label>
        <textarea id="feedbackform-body" class="form-control" name="FeedbackForm[body]" rows="4" cols="10"></textarea>
        <div class="help-block"></div>
    </div>
</form>

Похожие записи/страницы:

Leave a Comment